<template>
  <!-- <div class="container"> -->

  <!-- <topTitle :titleText="titleText"></topTitle> -->
  <!-- <div class="mainCon" style="top:198px"> -->
  <!-- <el-form :model="formData" :rules="formRules" ref="formData" label-width="100px" class="demo-ruleForm"> -->
  <el-form label-width="100px" class="demo-ruleForm">
    <el-row>
      <el-col :span="8">
        <el-form-item label="选择区域" prop="areaId">
          <el-cascader
            v-model="areaId"
            :options="areaIdOpt"
            @change="getAreaId"
            clearable
            filterable
            placeholder="请选择"
            :props="{ checkStrictly: true }"
          ></el-cascader>
        </el-form-item>
      </el-col>
      <!-- <el-col :span="4" offset="12"> -->
      <div class="fr">
        <el-button
          class="commonBut saveBtn"
          type="primary"
          @click="submitEdit"
          v-sdc
          :loading="isAdd"
          >保存</el-button
        >
      </div>
      <!-- </el-col> -->
    </el-row>
    <el-row v-if="tipsMsg">
      <el-col class="tipsMsg">
        {{ tipsMsg }}
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <div class="infoTitle">银行代发方式设置</div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple bankPay">
          <el-row
            v-for="(item, index) of bankWayResult"
            :key="index"
            v-if="item.subcategory == '81'"
          >
            <el-col :span="6">
              <div class="switchBox">
                <span class="bankName secondaryTitleTheme">{{
                  item.bankName
                }}</span>
                <!-- <span class="bankName">中国工商银行</span> -->
              </div>
            </el-col>
            <el-col :span="6">
              <div class="switchBox">
                <span>线下授权代发</span>
                <el-switch
                  @change="changeState($event, item, index, 1)"
                  v-model="item.objValue1"
                  active-value="1"
                  inactive-value="0"
                >
                </el-switch>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="switchBox">
                <span>线上授权代发</span>
                <el-switch
                  @change="changeState($event, item, index, 2)"
                  v-model="item.objValue2"
                  active-value="1"
                  inactive-value="0"
                >
                </el-switch>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="switchBox">
                <span>报盘代发</span>
                <el-switch
                  @change="changeState($event, item, index, 3)"
                  v-model="item.objValue3"
                  active-value="1"
                  inactive-value="0"
                >
                </el-switch>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col>
        <div class="infoTitle">工资表其他设置</div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple salaryOther">
          <!-- 需求砍掉了  后台还是返回了参数  前端先隐藏这个按钮 20201201 -->
          <!-- <el-row>
                            <el-col :span="7">
                                <p class="salaryTitle">是否运行导入未录入系统的人员工资表</p>
                            </el-col>
                            <el-col :span="17">
                                <div class="salaryOperate salaryRadio">
                            
                                   <el-switch 
                                    v-model="allowNoReigst"
                                    active-color="#009588 "
                                    inactive-color="#BDC1C6"
                                    active-value="1"
                                    inactive-value="0">
                                </el-switch>
                                </div>
                            </el-col>
                        </el-row> -->
          <el-row>
            <el-col :span="6">
              <p class="salaryTitle">工资代发人员要求：</p>
            </el-col>
            <el-col :span="17">
              <div class="salaryOperate salaryCheckbox">
                <el-checkbox
                  label="10"
                  class="checkbox"
                  v-model="needKaoQingRecord"
                  >工资当月有考勤记录</el-checkbox
                >
                <el-checkbox label="20" class="checkbox" v-model="needContact"
                  >签订劳动合同</el-checkbox
                >
                <el-checkbox label="30" class="checkbox" v-model="needPhone"
                  >必须填写手机号</el-checkbox
                >
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <p class="salaryTitle">同一项目同一月份人员代发次数限制：</p>
            </el-col>
            <el-col :span="17">
              <div class="salaryOperate salaryRadio">
                <el-radio-group v-model="limitUserRadio">
                  <el-radio label="0">一次</el-radio>
                  <el-radio label="1">不限制</el-radio>
                </el-radio-group>
              </div>
            </el-col>
          </el-row>
          <el-row
            v-for="(item, index) of bankWayResult"
            :key="index"
            v-if="item.subcategory == '84'"
          >
            <el-col :span="6">
              <p class="salaryTitle">工资表审核：</p>
            </el-col>
            <el-col :span="17">
              <div class="salaryOperate salaryRadio">
                <div class="switchBoxBtn">
                  <span>建设方审核</span>
                  <el-switch
                    @change="changeState($event, item, index, 1)"
                    v-model="item.objValue4"
                    active-value="1"
                    inactive-value="0"
                  >
                  </el-switch>
                  <span style="margin-left: 20px">劳动监察审核</span>
                  <el-switch
                    @change="changeState($event, item, index, 1)"
                    v-model="item.objValue5"
                    active-value="1"
                    inactive-value="0"
                  >
                  </el-switch>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <p class="salaryTitle">未签约专户制作工资表：</p>
            </el-col>
            <el-col :span="17">
              <div class="salaryOperate salaryRadio">
                <el-radio-group v-model="UnsignedRadio">
                  <el-radio label="1">可以制作</el-radio>
                  <el-radio label="0">不能制作</el-radio>
                </el-radio-group>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </el-form>
  <!-- </div> -->

  <!-- </div> -->
</template>

<script>
import topTitle from '@/components/publicCom/topTitle'
import emptyTable from '@/components/publicCom/emptyTable'
import Pagination from '@/components/publicCom/pagination'
import common from '../../kits/common'
export default {
  name: 'agencyPayment',
  components: {
    emptyTable,
    Pagination,
    topTitle,
  },
  data() {
    return {
      titleText: '代发设置',
      jsCheck: false,
      ldjcCheck: false,
      isAdd: false,
      tipsMsg: '',
      isUnionNoEditWhite: true,
      isUnionEditWhite: false,
      isUnionFinishedWhite: false,
      isUnionNoEditBlack: true,
      isUnionEditBlack: false,
      isUnionFinishedBlack: false,

      whiteListAddBtn: true,
      blackListAddBtn: true,
      whiteListAddSure: false,
      blackListAddSure: false,
      unionEditBtnText: '编辑权限配置',
      salaryEditBtnText: '编辑',

      bankWayResult: [],
      unionPayResult: {},
      salaryOtherResult: {},
      unionPayWhiteList: [],
      unionPayBlackList: [],

      unionPaySwitch: '',
      //工资表其他设置相关参数
      allowNoReigst: '', //表示关闭未录入系统的人员工资表按钮
      salaryEnterSwitch: '',
      limitUserRadio: '', //同一项目同一月份人员代发次数限制
      needKaoQingRecord: false, //需要考勤记录
      needContact: false, //需要合同
      needPhone: false, //必须填写手机号
      pageTotalWhiteEdit: 0,
      pageTotalBlackEdit: 0,
      pageNoWhite: 1,
      pageNoBlack: 1,
      pageNoWhiteEdit: 1,
      pageNoBlackEdit: 1,
      pageSizeNumber: 10,
      pageSizeNumberWhiteEdit: 10,
      pageSizeNumberBlackEdit: 10,

      // areaId: ['15','1501'],
      areaId: '',
      areaIds: '',
      areaIdOpt: [],

      // 白/黑名单远程搜索
      whiteSelectListVal: '',
      whiteSelectList: [],
      blackSelectListVal: '',
      blackSelectList: [],

      whiteProjectId: '',
      whiteProjectName: '',
      blackProjectId: '',
      blackProjectName: '',

      isSalaryEdit: true,
      salaryOtherVal: '',
      UnsignedRadio: '', //未签约专户制作工资表
    }
  },
  mounted() {
    this.initArea()
  },
  methods: {
    /**
     * @name:
     * @param {*}
     * @Author: luoyong/471826078@qq.com
     */
    submitEdit() {
      this.isAdd = true
      const {
        areaIds,
        bankWayResult,
        limitUserRadio,
        needKaoQingRecord,
        needContact,
        allowNoReigst,
        needPhone,
        UnsignedRadio,
      } = this
      let salaryStr =
        allowNoReigst +
        ',' +
        (needKaoQingRecord ? 1 : 0) +
        ',' +
        (needContact ? 1 : 0) +
        ',' +
        limitUserRadio +
        ',' +
        (needPhone ? 1 : 0)
      bankWayResult.forEach((item) => {
        if (item.subcategory == '81') {
          item.value =
            item.objValue1 + ',' + item.objValue2 + ',' + item.objValue3
          delete item.objValue1
          delete item.objValue2
          delete item.objValue3
        }
        if (item.subcategory == '84') {
          item.value = item.objValue4 + ',' + item.objValue5
          delete item.objValue4
          delete item.objValue5
        }
        if (item.subcategory == '83') {
          item.value = salaryStr
        }
        if (item.subcategory == '85') {
          item.value = UnsignedRadio
        }
      })

      let params = {
        areaId: areaIds,
        paramConfigList: bankWayResult,
        ncParamConfigVO: 1,
      }
      this.axios
        .post('api-m/paramconfig/expand/saveorupdateconfig', params, {
          headers: {
            'Content-Type': 'application/json', //设置请求头请求格式为JSON
          },
        })
        .then((res) => {
          if (!res.data.hasError) {
            this.isAdd = false
            this.$message({
              message: res.data.msg,
              type: 'success',
            })
            this.getInitData()
          } else {
            this.isAdd = false
            this.$message({
              message: res.data.errorMsg,
              type: 'warning',
            })
          }
        })
    },
    // 初始化页面数据
    getInitData() {
      this.axios
        .post('/api-m/paramconfig/expand/findCsConfigDetail', {
          areaId: this.areaIds,
        })
        .then((response) => {
          if (!response.data.hasError) {
            if (response.data.msg) {
              this.tipsMsg = response.data.msg
            } else {
              this.tipsMsg = ''
            }
            this.bankWayResult = []
            this.unionPayResult = []
            this.salaryOtherResult = []
            let curData = response.data.result
            for (var i = 0; i < curData.length; i++) {
              if (curData[i].subcategory == '81') {
                // 银行代发方式设置
                let obj = curData[i]
                let objValue = obj.value.split(',')
                let objValue1 = objValue[0]
                let objValue2 = objValue[1]
                let objValue3 = objValue[2]
                curData[i].objValue1 = objValue1
                curData[i].objValue2 = objValue2
                curData[i].objValue3 = objValue3
              }
              if (curData[i].subcategory == '82') {
              }
              if (curData[i].subcategory == '83') {
                let arr = curData[i].value.split(',')
                this.allowNoReigst = arr[0]
                this.needKaoQingRecord = arr[1] == 0 ? false : true
                this.needContact = arr[2] == 0 ? false : true
                this.limitUserRadio = arr[3]
                this.needPhone = arr[4] == 0 ? false : true
              }
              if (curData[i].subcategory == '84') {
                let obj = curData[i]
                let objValue = obj.value.split(',')
                let objValue4 = objValue[0]
                let objValue5 = objValue[1]
                curData[i].objValue4 = objValue4
                curData[i].objValue5 = objValue5
              }
              if (curData[i].subcategory == '85') {
                this.UnsignedRadio = curData[i].value
              }
            }
            this.bankWayResult = curData
          } else {
            // this.$message({
            //   type: "error",
            //   message: response.data.msg,
            // });
          }
        })
        .catch((error) => {})
    },
    //switch的change事件
    changeState($event, item, index, value) {
      if ($event == 1) {
        if (value == 1) {
          item.objValue2 = 0
          item.objValue3 = 0
        }
        if (value == 2) {
          item.objValue1 = 0
          item.objValue3 = 0
        }
        if (value == 3) {
          item.objValue1 = 0
          item.objValue2 = 0
        }
        this.$set(this.bankWayResult, index, item)
      }
    },

    // 初始化区域
    initArea() {
      this.axios({
        method: 'post',
        url: 'api-m/paramconfig/expand/areaTreeByUser',
        data: {
          // paramId: '',
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.areaIdOpt = response.data.result
              this.areaIds = response.data.result[0].value
              this.areaId = response.data.result[0].value
              this.getInitData()
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    //区域change事件
    getAreaId() {
      var areaId = this.areaId[this.areaId.length - 1]
      this.areaIds = areaId
      this.getInitData()
    },
  },
}
</script>

<style lang="less" scoped>
.container {
  .mainCon {
    background: #fff;
    padding: 24px;
    top: 212px;
    .bankPay {
      width: 100%;
    }
    .infoTitle {
      font-size: 16px;
      padding: 18px 24px;
      background: #f5f7fb;
      color: #333;
      font-weight: 700;
    }
    .switchBox {
      height: 60px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      border-bottom: 1px solid #dee5f4;
      span {
        vertical-align: middle;
        margin-right: 15px;
        font-size: 14px;
        color: #333;
      }
      .bankName {
        font-size: 16px;
        color: #333;
        font-weight: bold;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        padding-left: 24px;
        box-sizing: border-box;
      }
      .bankName:before {
        display: inline-block;
        width: 8px;
        height: 8px;
        content: '';
        background: #009588;
        margin-right: 10px;
      }
    }
    .switchBoxBtn {
      height: 16px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      // border-bottom:1px solid #DEE5F4;
      span {
        vertical-align: middle;
        margin-right: 15px;
        font-size: 14px;
        color: #333;
      }
      .bankName {
        font-size: 16px;
        color: #333;
        font-weight: bold;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        padding-left: 24px;
        box-sizing: border-box;
      }
      .bankName:before {
        display: inline-block;
        width: 8px;
        height: 8px;
        content: '';
        background: #009588;
        margin-right: 10px;
      }
    }
    .switchBoxUnion {
      border-bottom: 0;
      margin-top: 20px;
      // border:1px solid red;
      .bankName:before {
        display: inline-block;
        width: 0px;
        height: 0px;
        content: '';
        background: transparent;
        margin-right: 0px;
      }
    }
    .salaryOther {
      width: 100%;
      padding: 40px 0;
      box-sizing: border-box;
      .switchBoxSalary {
        height: auto;
        border-bottom: 0;
      }
      .salaryTitle {
        margin-left: 24px;
        margin-right: -5px;
        margin-bottom: 32px;
        font-size: 14px;
        color: #3a3a3a;
        text-align: left;
        font-weight: bold;
      }
      .salaryOperate {
        // padding-left:25px;
        box-sizing: border-box;
      }
      .salaryOtherBtn {
        padding-left: 25px;
        box-sizing: border-box;
      }
    }
    .el-cascader {
      width: 100%;
    }
  }
  .tipsMsg {
    line-height: 36px;
    font-size: 14px;
    color: #666;
    padding-left: 24px;
  }
}
</style>
